<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}" />
</head>

<body class="hold-transition login-page">
    <div class="login-box fadeIn animated slow">
        <div class="login-logo">
            <b>Demo</b>
        </div>
        <!-- /.login-logo -->
        <div class="login-box-body">
            <form role="form" id="login-form" method="post">
                <div class="form-group has-feedback">
                    <input type="text" class="form-control" placeholder="用户名" id="username" maxlength="16" />
                    <span class="fa fa-user form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" class="form-control" placeholder="密码" id="password" maxlength="16"
                        autocomplete="off" autofocus="autofocus" />
                    <span class="fa fa-lock form-control-feedback"></span>
                </div>
                <div class="row">
                    <div class="col-xs-4 col-xs-offset-8">
                        <button type="button" class="btn btn-primary btn-block btn-flat" id="login-submit">登录</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->
    <script th:src="@{/plugins/layui/layui.js}"></script>
    <script>
        $(document).ready(function () {

            let $loginSubmit = $('#login-submit');
            let $passParent = $('#password').parent();
            let $userName = $('#username');
            let $password = $('#password');
            let $loginFailed = $('#login-failed');
            let $changeUser = $('#changeUser');

            let user = window.localStorage.getItem('ems-user-info');
            if (!!user) {
                $userName.val(user);
                $userName.prop('readonly', true);
                $passParent.removeClass('hidden');
                $loginSubmit.text('登录');
                $changeUser.removeClass('hidden');
            }

            $changeUser.unbind('click').on('click', function () {
                $password.val('');
                $userName.prop('readonly', false);
                $passParent.addClass('hidden');
                $changeUser.addClass('hidden');
                $loginSubmit.text('下一步');
            });

            $loginSubmit.unbind('click').on('click', function () {
                let $this = $(this);
                if (!!$password.val()) {
                        $this.html('<i class="fa fa-spin fa-spinner"></i>');
                        $.ajax({
                            type: 'POST',
                            url: '/login',
                            data: JSON.stringify({
                                "loginId": $userName.val(),
                                "password": window.btoa($password.val())
                            })
                        }).done(function (e) {
                            window.location.href = '/'
                        }).fail(function (e) {
                            $loginFailed.removeClass('hidden');
                            $loginFailed.text('密码错误');
                            $this.html('登录');
                        })
                    } else {
                        $loginFailed.removeClass('hidden');
                        $loginFailed.text('请输入密码');
                    }
            });

            $(document).unbind('keydown').on('keydown', function (e) {
                if (e.keyCode === 13) {
                    $loginSubmit.trigger('click');
                }
            })
        })
    </script>
</body>

</html>